import InnerPageContainer from "@/components/common/InnerPageContainer";
import PageMetaTags from "@/containers/PageMetaTags";
import Container from "@/components/common/Carousel";
import Amap from "@/components/common/Amap";
import withTranslate from "@/hocs/withTranslate";

const imageSrc = ['/images/contact/top1.jpg', '/images/contact/top2.jpg', '/images/contact/top3.png'];

function Page({ t }) {
  return (
    <div className="grid place-items-center w-full pb-48">
      <Container urls={imageSrc} />
      <div className="max-w-5xl w-full  px-12 text-left flex-col pt-10 ">

        <h1 className="text-2xl text-left font-bold mt-10 pl-8">{t('contact.info')}</h1>
        <div className="divider"></div>

        <div className="grid md:grid-cols-3 gap-8 p-8">
          {/* 左侧联系信息 */}

          <div className="space-y-6 grid-cols-1">

            <div className="space-y-4">
              <div className="flex items-center space-x-4">
                {/* <FiMail className="w-6 h-6 text-blue-800" /> */}
                <div>
                  <h3 className="font-semibold text-gray-800">{t('contact.email')}</h3>
                  <p className="text-gray-600">smutoh.sci.yamanashi.ac.jp email
                  ※sciを@に変えて送信して下さい</p>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                {/* <FiMapPin className="w-6 h-6 text-blue-800 mt-1" /> */}
                <div>
                  <h3 className="font-semibold text-gray-800">{t('contact.address')}</h3>
                  <p className="text-gray-600">
                    〒400-0018<br />
                    山梨県甲府市武田4-3-11 <br />
                    山梨大学工学部
                  </p>
                </div>
              </div>

            </div>


          </div>

          <div className="space-y-6 grid-cols-2">
            {/* 地图 */}
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d773.4766078908842!2d138.5738212781011!3d35.67635183633069!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601bf83408bed7c1%3A0x9875054333a3e074!2z44CSNDAwLTAwMTYg5bGx5qKo55yM55Sy5bqc5biC5q2m55Sw77yU5LiB55uu77yTIEItM-WPt-mkqCjorJvnvqnjg7vnoJTnqbbmo58p!5e1!3m2!1sja!2sjp!4v1743105895632!5m2!1sja!2sjp"
              width="600"
              height="450"
              //  style="border:0;"
              allowfullscreen=""
              loading="lazy" referrerpolicy="no-referrer-when-downgrade">

            </iframe>
            {/* <Amap location={{ lng: 116.397428, lat: 39.90923 }} /> */}
          </div>
        </div>
        <h1 className="text-2xl font-bold mt-10">{t('contact.info2')}</h1>
        <div className="divider"></div>
        <div>
          <img
            src={'/images/contact/map.png'}
            className="w-full pt-5" />
        </div>
      </div>
    </div>

  )
}

export default withTranslate(Page)
